<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英语句子听力练习</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container">
        <header>
            <div class="header-content">
                <h1>英语句子听力练习</h1>
                <div class="header-controls">
                    <div class="score-display">
                        <div class="coin-icon"></div>
                        <span id="scoreValue">0</span>
                    </div>
                </div>
            </div>
            <div class="progress-container">
                <div class="progress-bar" id="progressBar"></div>
            </div>
        </header>

        <main>
            <!-- 单词练习区域 -->
            <section id="wordPractice" class="practice-section">
                <div class="audio-control">
                    <button id="playWordBtn" class="audio-btn">🔊 播放单词</button>
                    <div class="speed-menu-container">
                        <button id="speedMenuBtn" class="speed-menu-btn">
                            倍速 <span id="currentSpeed">1.0x</span> ▼
                        </button>
                        <div id="speedMenu" class="speed-menu hidden">
                            <button class="speed-option" data-speed="0.75">0.75x</button>
                            <button class="speed-option active" data-speed="1.0">1.0x</button>
                            <button class="speed-option" data-speed="1.25">1.25x</button>
                            <button class="speed-option" data-speed="1.5">1.5x</button>
                        </div>
                    </div>
                </div>
                <div class="options-container" id="wordOptions"></div>
            </section>

            <!-- 句子练习区域 -->
            <section id="sentencePractice" class="practice-section hidden">
                <div class="audio-control">
                    <button id="playSentenceBtn" class="audio-btn">🔊 播放句子</button>
                </div>
                <div class="options-container" id="sentenceOptions"></div>
            </section>

            <!-- 结果反馈区域 -->
            <div id="feedback" class="feedback hidden"></div>

            <!-- 导航按钮 -->
            <div class="navigation-buttons">
                <button id="nextBtn" class="nav-btn hidden">下一项</button>
                <button id="statsBtn" class="nav-btn" onclick="window.location.href='stats.html'">学习统计</button>
            </div>
        </main>

        <footer>
            <p>依据100句学会1200小学英语单词 | 听力练习 | <a href="clear-data.html">清除数据</a></p>
        </footer>
    </div>

    <script src="js/data.js"></script>
    <script src="js/progress.js"></script>
    <script src="js/stats.js"></script>
    <script src="js/app.js"></script>
<script>
    // 初始化速度菜单
    document.addEventListener('DOMContentLoaded', function() {
        const speedMenuBtn = document.getElementById('speedMenuBtn');
        const speedMenu = document.getElementById('speedMenu');
        const currentSpeedDisplay = document.getElementById('currentSpeed');
        let audioSpeed = 1.0;

        // 切换速度菜单显示/隐藏
        speedMenuBtn.addEventListener('click', function() {
            speedMenu.classList.toggle('hidden');
        });

        // 点击页面其他地方关闭菜单
        document.addEventListener('click', function(event) {
            if (!speedMenuBtn.contains(event.target) && !speedMenu.contains(event.target)) {
                speedMenu.classList.add('hidden');
            }
        });

        // 为速度选项添加点击事件
        document.querySelectorAll('.speed-option').forEach(btn => {
            btn.addEventListener('click', function() {
                const speed = parseFloat(this.dataset.speed);
                audioSpeed = speed;
                currentSpeedDisplay.textContent = speed + 'x';

                // 更新所有速度选项的样式
                document.querySelectorAll('.speed-option').forEach(opt => {
                    if (parseFloat(opt.dataset.speed) === speed) {
                        opt.classList.add('active');
                    } else {
                        opt.classList.remove('active');
                    }
                });

                // 调用全局函数设置音频速度
                setAudioSpeed(speed);

                // 关闭菜单
                speedMenu.classList.add('hidden');
            });
        });
    });
</script>
</body>
</html>